<template>
  <div>
    <el-button
      style="justify-content: flex-start; width: 220px; overflow: hidden"
      @click="openModal"
    >
      {{ showStr }}
    </el-button>
    <!-- <varietyMachineModal
      v-if="modalConfig.type === 'variety-machine'"
      v-bind="modalConfig"
      @register="registerModal"
      @confirm="handleConfirm"
    ></varietyMachineModal>
    <Modal v-else v-bind="modalConfig" @register="registerModal" @confirm="handleConfirm" /> -->

    <component
      :is="modalConfig.type"
      v-bind="modalConfig"
      @register="registerModal"
      @confirm="handleConfirm"
    />
  </div>
</template>

<script setup lang="ts">
  import { useVxeModal } from '@/components/ui/vxe-modal'
  import { type Props, defaultProps } from './props'
  // import Modal from './Modal.vue'
  // import VarietyMachineModal from './varietyMachineModal.vue'

  const props = withDefaults(defineProps<Props>(), defaultProps)

  const emits = defineEmits(['update:modelValue', 'change', 'confirm'])

  const [registerModal, modalMethods] = useVxeModal()

  const selectList = computed({
    get: () => props.modelValue,
    set: (newValue) => {
      emits('change', newValue)
      emits('update:modelValue', newValue)
    }
  })

  const selectListItems = computed(() => {
    return selectList.value.map((v) => props.modalConfig.options?.find((item) => item.value === v))
  })

  const showStr = computed(() => selectListItems.value.map((v) => v?.label).join(','))

  const openModal = () => {
    modalMethods.openModal(true, {
      defaultChecked: selectList.value
    })
  }

  const handleConfirm = (val) => {
    selectList.value = val
  }
</script>

<style lang="scss" scoped></style>
